<template>
  <view class="timeline">
    <view class="card-list">
      <pane-card v-for="(item, index) in info" :key="index">
        <view slot="title">
          <text class="time block">{{ item.timeRange[0] }}-{{ item.timeRange[1] }}</text>
            <text class="desc">{{ item.message }}</text>
        </view>
        <view :class="{
          tag: true,
          warning: item.status === 0,
          success: item.status === 1,
          error: item.status === 2
        }" 
        slot="right">
          <text>{{ tagsMap[item.status] }}</text>
        </view>
      </pane-card>
    </view>
    <v-empty :isShow="!info.length && showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import PaneCard from '@/components/m-card/pane-card.vue';
  import Api from '@/api/main';
  import VEmpty from '@/components/v-empty/index.vue';
  export default {
    components: {
      PaneCard,
      VEmpty
    },
    onLoad({ title = '隔离时间轴', userId, code } = {}) {
      uni.setNavigationBarTitle({
        title
      });
      this.getList(userId);
    },
    data() {
      return {
        tagsMap: ['未开始', '进行中', '已超时'],
        showEmpty: false,
        info: [
          // {
          //   // 时间范围
          //   timeRange: ['11:00', '12:00'],
          //   // 信息
          //   message: '疾控中心下发隔离信息',
          //   // 0未完成，1已完成
          //   status: 0
          // },
          // {
          //   // 时间范围
          //   timeRange: ['11:00', '12:00'],
          //   // 信息
          //   message: '疾控中心下发隔离信息',
          //   // 0未完成，1已完成
          //   status: 1
          // }
        ]
      };
    },
    methods: {
      getTagStatusCls(status) {
        return {
          tag: true,
          warning: status === 0,
          success: status === 1,
          error: status === 2
        };
      },
      async getList(userId) {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getTimelineList, { userId });
        this.info = res || [];
        this.showEmpty = !this.info.length;
        uni.hideLoading();
      }
    }
  };
</script>
<style lang="scss">
  .timeline {
    width: 100%;
    padding: 20rpx 40rpx;
    .time {
      font-size: 17px;
    }
    .desc {
      color: #666666;
    }
    .tag {
      padding: 4rpx 4rpx;
      width: 110rpx;
      text-align: center;
      border-radius: 16rpx;

      &.success {
        color: $uni-color-success;
        background-color: rgba($color: $uni-color-success, $alpha: 0.2);
      }

      &.warning {
        color: $uni-color-warning;
        background-color: rgba($color: $uni-color-warning, $alpha: 0.2);
      }

      &.error {
        color: $uni-color-error;
        background-color: rgba($color: $uni-color-error, $alpha: 0.2);
      }
    }
  }
</style>